<style scoped>
  .expand-row{
    margin-bottom: 16px;
    margin-left: 16px;
    /* text-align: center */
  }
</style>
<template>
  <div>
    <Row class="expand-row" v-for="(item, index) in row.value" :key="index">
      <Col span="3">
        <!-- <span class="expand-key">序号: </span> -->
        <span class="expand-value">{{ index+1 }}</span>
      </Col>
      <Col span="8">
        <span class="expand-key">参数名: </span>
        <span class="expand-value">{{ item.des }}</span>
      </Col>
      <Col span="8">
        <span class="expand-key">参数: </span>
        <span class="expand-value">{{ item.value }}</span>
      </Col>
      <Col span="5">
        <span class="expand-key">操作: </span>
        <span class="expand-value">
          <Button type="primary" ghost="ghost" size="small" @click="handleClick(item)">修改</Button>
        </span>
      </Col>
    </Row>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
export default {
  name: 'TableExpand',
  props: {
    row: Object
  },
  methods: {
    ...mapActions([
      'getConfigCurrentRow',
      'updateCustomerDrawerState'
    ]),
    handleClick (item) {
      let newRow = {}
      if (item) {
        newRow = Object.assign({}, item)
      }
      this.getConfigCurrentRow(newRow)
      this.updateCustomerDrawerState(true)
    }
  }
}
</script>
